<template>
  <view class="sidebar-container" :class="{ 'sidebar-active': isOpen }" @tap.stop>
    <!-- 添加背景图片 -->
    <image class="sidebar-bg" src="/static/sidebar-bg.jpg" mode="aspectFill"></image>

    <!-- 顶部区域 - 移除了关闭按钮 -->
    <view class="sidebar-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="app-name">西建大 iOS club</text>
      <!-- 移除了关闭按钮的view -->
    </view>

    <!-- 当前路径 -->
    <view class="current-path-container">
      <uni-icons type="location-filled" size="16" color="#3498db"></uni-icons>
      <text class="current-path-text">{{ currentPathDisplay }}</text>
    </view>

    <!-- 导航头部 -->
   
    <view class="nav-header">
      <view class="home-btn" @click="$emit('go-home')">
        <uni-icons type="home" size="16" color="#fff"></uni-icons>
        <text class="btn-text">主页</text>
      </view>
      <view v-if="currentPath" class="back-btn" @click="$emit('go-back')">
        <uni-icons type="arrowleft" size="16" color="#fff"></uni-icons>
        <text class="btn-text">返回上级</text>
      </view>
      <!-- 添加搜索按钮 -->
      <view class="home-btn" @click="goToSearch">
        <uni-icons type="search" size="16" color="#fff"></uni-icons>
        <text class="btn-text">搜索</text>
      </view>
    </view>

    <!-- 目录列表 -->
    <scroll-view scroll-y class="directory-list">
      <view 
        v-for="item in currentDirectories" 
        :key="item.id"
        class="directory-item"
        :class="{
          'active': selectedItem && selectedItem.id === item.id,
          'folder': !isLeafNode(item),
          'leaf': isLeafNode(item)
        }"
        @click="handleItemClick(item)"
        :style="{ paddingLeft: (item.depth * 16) + 'px' }"
      >
        <uni-icons 
          :type="isLeafNode(item) ? 'file-filled' : 'folder-filled'" 
          size="18" 
          :color="isLeafNode(item) ? '#95a5a6' : '#f39c12'"
        ></uni-icons>
        <text class="item-title">{{ item.title }}</text>
        <view v-if="!isLeafNode(item)" class="arrow-icon">
          <uni-icons type="arrowright" size="14" color="#bdc3c7"></uni-icons>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import uniIcons from '../../node_modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

export default {
  components: {
    uniIcons
  },
  props: {
    isOpen: Boolean,
    currentPath: String,
    treeData: Array,
    listData: Array,
    selectedItem: Object
  },
  computed: {
    currentPathDisplay() {
      return this.currentPath === '' ? '根目录' : 
             this.currentPath === 'home' ? '主页' : 
             `当前路径: ${this.currentPath}`;
    },
    
    currentDirectories() {
      if (this.currentPath === '') {
        return this.treeData;
      }
      const currentNode = this.findItemByPath(this.currentPath);
      return currentNode?.children || [];
    }
  },
  methods: {
    findItemByPath(path) {
      const find = (nodes) => {
        for (const node of nodes) {
          if (node.path === path) return node;
          if (node.children) {
            const found = find(node.children);
            if (found) return found;
          }
        }
        return null;
      };
      return find(this.treeData);
    },
    
    isLeafNode(item) {
      return !item.isFolder || 
             (item.children && item.children.length === 0) ||
             (!item.children && this.listData.some(listItem => listItem.path === item.path));
    },
    
    handleItemClick(item) {
      this.$emit('navigate', item);
      uni.vibrateShort();
    },
	 goToSearch() {
	    this.$emit('close'); // 关闭侧边栏
	    uni.navigateTo({
	      url: '/pages/search/search'
	    });
	  }
  }
};
</script>

<style lang="scss" scoped>
	/* 新增导航按钮样式 */
	.builtin-nav-buttons {
	  display: flex;
	  padding: 10px 15px;
	  background-color: rgba(44, 62, 80, 0.5);
	  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	
	  .nav-btn {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 8px;
	    border-radius: 4px;
	    margin: 0 5px;
	    background-color: rgba(255, 255, 255, 0.1);
	    color: #ecf0f1;
	    
	    &:active {
	      background-color: rgba(255, 255, 255, 0.2);
	    }
	    
	    text {
	      margin-left: 5px;
	      font-size: 14px;
	    }
	  }
	}

/* 添加背景图片样式 */
.sidebar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保背景在内容下方 */
}


/* 如果需要添加背景叠加效果，可以考虑这样： */
.sidebar-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色叠加 */
  z-index: -1;
}

/* 确保所有内容元素都有适当的z-index和position */
.sidebar-header, .current-path-container, .nav-header, .directory-list {
  position: relative;
  z-index: 1;
}

.sidebar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 62, 80, 0.5); /* 透明度从0.7降低到0.5 */
    z-index: -1;
  }
  
  color: #ecf0f1;
  transform: translateX(-100%);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  
  &.sidebar-active {
    transform: translateX(0);
  }
}

/* 导航头部样式 */
.nav-header {
  padding: 15px;
  margin: 0px 0; /* 增加上下边距 */
  background-color: rgba(44, 62, 80, 0.8);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.home-btn, .back-btn {
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  color: #ecf0f1;
  
  &:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
  }
}

.home-btn {
  margin-right: 5px;
}
.back-btn {
  margin-right: 5px;
}
.btn-text {
  margin-left: 5px;
  font-weight: 500;
}

/* 侧边栏头部样式 - 移除了关闭按钮相关样式 */
.sidebar-header {
  padding: 20px 15px;
  display: flex;
  align-items: center;
  background-color: rgba(44, 62, 80, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  .logo {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  
  .app-name {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    color: #ecf0f1;
  }
  /* 移除了.close-btn相关样式 */
}

.current-path-container {
  padding: 12px 15px;
  margin-bottom: 0px; /* 增加下边距 */
  background-color: rgba(44, 62, 80, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  
  .current-path-text {
    margin-left: 8px;
    font-size: 14px;
    color: #bdc3c7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.directory-list {
  height: calc(100vh - 220px);
  background-color: rgba(44, 62, 80, 0.5);
}

.directory-item {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  color: #ecf0f1;
  
  
  
  
  .btn-text {
    margin-left: 5px;
    font-weight: 500;
    white-space: nowrap; // 防止文字换行
  }
  
  &.active {
      background-color: rgba(52, 152, 219, 0.2); /* 透明度从0.3降低到0.2 */
      border-left-color: #5dade2; /* 使用更淡的蓝色 */
      
      .item-title {
        color: #5dade2; /* 使用更淡的蓝色 */
      }
    }
  
  &:not(.active):active {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .item-title {
    margin-left: 10px;
    font-size: 15px;
    flex: 1;
    transition: color 0.2s;
  }
  
  .arrow-icon {
    opacity: 0.6;
    color: #ecf0f1;
  }
  
  &.folder .item-title {
    font-weight: 500;
  }
  
  &.leaf .item-title {
    color: #bdc3c7;
  }
}
</style>